<script setup>
import { ref } from 'vue';


    const searchQuery = ref('');
    const items = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    const onSearch = () => {
      // 模拟搜索功能
      items.value = ['内容增值', 'backup', '送祝福', '平台运营', 'polaris', 'monitor', 'vip运营', 'cdm'];
    };

    const onCancel = () => {
      searchQuery.value = '';
    };

    const onLoad = () => {
      loading.value = true;

      setTimeout(() => {
        // 模拟加载更多数据
        items.value.push('新项目1', '新项目2');

        loading.value = false;

        if (items.value.length >= 10) {
          finished.value = true;
        }
      }, 1000);
    };

    const onItemClick = (item) => {
      alert(`点击了项目: ${item}`);
    };

    onMounted(() => {
      onSearch();
    });
</script>

<template>
<div>
    <van-search
      v-model="searchQuery"
      placeholder="搜索项目"
      show-action
      @search="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <van-button type="primary" size="small" round @click="onSearch">搜索</van-button>
      </template>
    </van-search>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad"
    >
      <van-cell v-for="item in items" :key="item" :title="item" @click="onItemClick(item)" />
    </van-list>

    <van-button type="primary" block @click="onLoad">加载更多</van-button>
  </div>
</template>

<style scoped>
</style>
